import Fetch from '../modules/fetch'
import ContainerComponent from './ContainerComponent'
import indexData from './indexData'
import Jsonp from 'jsonp'
import {Link} from 'react-router'
import $ from 'jquery'

class DiscussComponent extends React.Component {   
    constructor(props,context){
        super(props,context)

        this.state={
			videoTitle: [],
        	videoTagName:[],
        	videoList:{},
        	videoList2:{
        		owner:{
        			name:''
        		},
        		stat:{
        			view:'',
        			reply:''
        		},
        		desc:''
        	},
        	idNum:this.props.location.pathname.split('/').pop()     	
        }
    }
    
    componentWillMount(){

		window.scrollTo(0,0)
    	
		var that = this

		
	
		this._getNewsOne(function(news){

			news.forEach(function(item,i){

				if(item.aid==that.state.idNum){

						that.setState({
							videoList2:news[i]
						})

					
				}
			})
			
		})
		
		
	
		// https://comment.bilibili.com/recommendnew,14585880
		
        Fetch.Get("http://localhost:9000/cmm/recommendnew,14638041", {

	        }).then(res => {
	        	
				return res.text()
			}).then(text => {
	
				this.setState({
					videoTitle:JSON.parse(text).data
				})
	
			})

	}
    
   
   		componentDidMount(){
			var that = this
			
			this._getData(function(res){
					console.log(res)
				that.setState({
					videoList2:res
				})	
			})									
		}
   
    _getData(cb){
		let dataList = indexData.data

		let that=this

		for(var list in dataList){
			dataList[list].forEach((item,i)=>{

				
				if(item.aid==that.state.idNum){
						cb(item)
				}
			})
		}		
	}
    
    _getNewsOne(cb){
    	//http://api.bilibili.com/x/web-interface/ranking/index?day=3
    	Fetch.Get("http://localhost:9000/bilili/x/web-interface/ranking/index", {
			day:3
        }).then(res => {
        	
			return res.json()
		}).then(json => {

			cb(json.data)

		})
    }
    
    
    showgoods(){
    	
    }

   showBox2Words(){
        let that = this
		let str = ''	
        
		
        	this.state.videoTitle.forEach((item,i)=>{
        		let _src = item.pic.replace("http","https")
				var addr = item.owner.face

        		if(i<10){      			
					str+= `			
							<a class="video_recommend_link">
								<img class="video_recommend_link_img" src='${_src+"@234w_146h.webp"}' />
								<p class="video_recommend_link_title">${item.title}</p>
								<p class="video_recommend_link_up">up主:  ${item.owner.name}<span></span></p>
								<div class="video_recommend_link_play"><div>播放 : ${item.stat.view}<span></span></div><div>弹幕 : ${item.stat.danmaku}<span></span></div></div>
							</a>		
							<hr/>
						`		    		
        		}   
        		$(".imgId").attr('src','lib/images/p4.jpg'); 
	        })
			$('.video_recommend').html(str)
			
    }
   

    changeTowhat(){
		$(location).attr('href', '#/reg');
	}
    changeTowhat2(){
		$(location).attr('href', '#/');
	}
   
    
    render() {
		return (
			
			
			<div className="video_container">			
         	<div className="header-swipper">		
					<div className="header-top">
			    		<img src="./lib/images/logo.png" alt="" className="header-top__logo" onClick={this.changeTowhat2}/>
			    		<div className="header-top__right">
			    			<img src="./lib/images/tv_icon.gif" alt="" className="userBox_pic"/>
			    			<p onClick={this.changeTowhat}>注册</p>
			    		</div>
			    	</div>
				</div>
				
				<img src='./lib/images/p3.jpg' className='ccc'/>
				<div className="video_share">
					<a>分享</a>
					<a>收藏</a>
					<a>缓存</a>
				</div>
				
				<div className="video_title">
					<Link to={"/infofly/"+this.state.videoList2.aid}>
						<h3>{this.state.videoList2.title}</h3>
						<div className="video_number">
							<p><span className="iconfont icon-shipin"></span><span>{this.state.videoList2.play?this.state.videoList2.play:this.state.videoList2.stat.view}</span><span className="iconfont icon-mulu"></span><span>{this.state.videoList2.review?this.state.videoList2.review:this.state.videoList2.stat.reply}</span></p>
						</div>
						<div className="video_info">{this.state.videoList2.description?this.state.videoList2.description:this.state.videoList2.desc}</div>
					</Link>	
				</div>
				
				<div className="video_attention">
					<Link to={"/infofly/"+this.state.videoList2.aid}>
						<img src='' className='imgId'/>
						<div><a className='bbb'>{this.state.videoList2.author?this.state.videoList2.author:this.state.videoList2.owner.name}</a><p>三天前投</p></div>
						<a className="video_attention_button">关注</a>
					</Link>
				</div>
				<div className="video_tag">
					<h3>相关标签</h3>
					<a>NO GAME NO LIFE</a>
					<a>AMV</a>
					<a>游戏人生</a>
					<a>游戏人生剧场版</a>
				</div>
				
				<div className="video_recommend">

					{this.showBox2Words()}
					
				</div>
			</div>
		)
	}
    componentDidUpdate() {

        $(".video_recommend_link_img").each((index, item)=>{
            $(item).on("error", ()=>{
                $(item).attr("src", "./lib/images/403.png")
            })
        })
    }
}
//定义默认属性
DiscussComponent.defaultProps={

}



export default DiscussComponent